<template>
	<view class="content">
		<mp-html :content="html" :tag-style="tag_style"/>
		<!-- <rich-text :nodes="html"></rich-text> -->
	</view>
</template>
<script>
import {toast, clearStorageSync, setStorageSync, getStorageSync, useRouter} from '@/utils/utils.js'
export default {
	data() {
		return {
			html: '',
			tag_style:{
				 p: 'line-height:45rpx; margin-top: 30rpx;',
				 img : 'width:100%',
			}
		}
	},
	onLoad(op) {
		this.id  = op.id
		this.getPage()
	},
	onShow() {
	},
	onReady() {
	},
	methods: {
		getPage(){
			// 根据ID加载不同的协议内容
			this.loadStaticContent();
		},
		
		loadStaticContent() {
			const contentMap = {
				'1': {
					title: '公司简介',
					content: `
						<h1>关于我们</h1>
						<p>我们是一家专注于提供优质备忘录服务的科技公司，致力于帮助用户更好地管理和记录生活中的重要信息。</p>
						<h2>公司使命</h2>
						<p>让每个人都能轻松记录和管理自己的想法与灵感。</p>
						<h2>核心价值</h2>
						<ul>
							<li>🎯 用户至上</li>
							<li>🔒 安全可靠</li>
							<li>💡 持续创新</li>
							<li>🤝 诚信透明</li>
						</ul>
					`
				},
				'2': {
					title: '公司资质',
					content: `
						<h1>公司资质</h1>
						<p>我们具备完善的资质证书和认证：</p>
						<ul>
							<li>📄 软件著作权证书</li>
							<li>🏆 高新技术企业认证</li>
							<li>🔐 ISO27001信息安全管理体系认证</li>
							<li>✅ 软件产品登记证书</li>
						</ul>
					`
				},
				'3': {
					title: '服务协议',
					file: '/static/protocols/service_agreement.html'
				},
				'4': {
					title: '隐私政策',
					file: '/static/protocols/privacy_policy.html'
				},
				'5': {
					title: '联系我们',
					content: `
						<h1>联系我们</h1>
						<div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0;">
							<h2>📞 客服热线</h2>
							<p style="font-size: 18px; color: #2c3e50;">400-123-4567</p>
							<p>工作时间：周一至周五 9:00-18:00</p>
						</div>
						
						<div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0;">
							<h2>📧 邮箱联系</h2>
							<p>客服邮箱：support@memo-app.com</p>
							<p>商务合作：business@memo-app.com</p>
							<p>意见反馈：feedback@memo-app.com</p>
						</div>
						
						<div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0;">
							<h2>🏢 公司地址</h2>
							<p>北京市朝阳区xxx路xxx号</p>
							<p>邮编：100000</p>
						</div>
						
						<div style="background: #f8f9fa; padding: 20px; border-radius: 8px; margin: 20px 0;">
							<h2>💬 在线客服</h2>
							<p>微信客服：memo-support</p>
							<p>QQ客服：123456789</p>
						</div>
					`
				}
			};
			
			const pageInfo = contentMap[this.id];
			if (pageInfo) {
				uni.setNavigationBarTitle({
					title: pageInfo.title
				});
				
				if (pageInfo.file) {
					// 如果有文件路径，加载HTML文件
					this.loadHtmlFile(pageInfo.file);
				} else {
					// 否则直接使用内容
					this.html = pageInfo.content;
				}
			}
		},
		
		loadHtmlFile(filePath) {
			// 注释掉外部请求，使用静态内容代替
			// 在实际项目中，可以通过uni.request或其他方式加载HTML文件
			// 这里提供一个示例实现
			/*
			uni.request({
				url: filePath,
				method: 'GET',
				success: (res) => {
					if (res.statusCode === 200) {
						this.html = res.data;
					} else {
						this.html = '<p>协议内容加载失败，请稍后重试。</p>';
					}
				},
				fail: () => {
					this.html = '<p>协议内容加载失败，请检查网络连接。</p>';
				}
			});
			*/
			
			// 使用静态内容代替网络请求
			if (filePath.includes('service_agreement')) {
				this.html = `
					<h1>服务协议</h1>
					<p>感谢您使用我们的备忘录应用。在使用本服务前，请仔细阅读以下条款。</p>
					<h2>1. 服务内容</h2>
					<p>本应用提供个人备忘录记录和管理服务。</p>
					<h2>2. 用户责任</h2>
					<p>用户应当合法使用本服务，不得用于违法违规目的。</p>
					<h2>3. 隐私保护</h2>
					<p>我们承诺保护用户隐私，不会泄露用户个人信息。</p>
					<h2>4. 免责声明</h2>
					<p>对于因用户使用本服务而产生的任何损失，我们不承担责任。</p>
				`;
			} else if (filePath.includes('privacy_policy')) {
				this.html = `
					<h1>隐私政策</h1>
					<p>我们非常重视用户隐私保护。</p>
					<h2>1. 信息收集</h2>
					<p>我们仅收集为提供服务所必需的基本信息。</p>
					<h2>2. 信息使用</h2>
					<p>收集的信息仅用于改善服务质量，不会用于其他目的。</p>
					<h2>3. 信息保护</h2>
					<p>我们采用先进的技术手段保护用户信息安全。</p>
					<h2>4. 信息共享</h2>
					<p>除法律要求外，我们不会与第三方共享用户信息。</p>
				`;
			} else {
				this.html = '<p>内容加载中...</p>';
			}
		}
	}
}
</script>
<style lang="scss">	
	.content{
		padding: 20rpx;
	}
</style>
